<example name="Markdown">
  <file name="index.html">
    <div id="markdown"></div>
  </file>

  <file name="index.js">
    import React from 'react';
    import {render} from 'react-dom';

    import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';

    const demo = (
      <Markdown
        source={`
          # Header

          _Various_ types of **highlighting**

          [Link](/)

          > Blockquote
          >
          > Second line

          * List
          * List

          1. One
          2. Two

          Horizontal line

          ---
          Some \`inline(code)\` inside text

          ## Block code
          \`\`\`js
          import React, {Component} from 'react';
          import ChildComponent from './child-component';

          const MyComponent = () => (
            <div className="class">
              <ChildComponent prop="value" />
            </div>
          );
          \`\`\`
        `}
      />
    );
    render(demo, document.getElementById('markdown'));
  </file>
</example>

<example name="Markdown as tagged template">
  <file name="index.html">
    <div id="markdown"></div>
  </file>

  <file name="index.js">
    import React from 'react';
    import {render} from 'react-dom';

    import {md} from '@jetbrains/ring-ui/components/markdown/markdown';

    const demo = md`
      # Header

      _Various_ types of **highlighting**

      [Link](/)

      > Blockquote
      >
      > Second line

      * List
      * List

      1. One
      2. Two

      Horizontal line

      ---
      Some \`inline(code)\` inside text

      ## Block code
      \`\`\`js
      import React from 'react';

      import {md} from '@jetbrains/ring-ui/components/markdown/markdown';

      const MarkdownHeader = ({children}) => md\`#\${children}\`;
      \`\`\`
    `;
    render(demo, document.getElementById('markdown'));
  </file>
</example>
